<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar leftIconSize="40" :autoBack="true" height="0px" bgColor="#f9f9f900"> </u-navbar>

		<!--背景图  -->
		<view>
			<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="500rpx"></u--image>
		</view>
		<!-- 内容 -->
		<view class="container">
			<view class="meInfo">
				<u--image shape="circle" src="https://cdn.uviewui.com/uview/album/1.jpg" width="160rpx"
					height="160rpx"></u--image>
				<u--text lineHeight="60" align="center" size="30" bold text="中厂大师"></u--text>
				<u--text lineHeight="60" color="#B8B6BE" align="center" size="22" bold text="这是我的签名希望大家希望"></u--text>
				<view @click="toMessage()" class="messageBox padding10-30">
					<u-icon size="40" color="#ffffff" name="chat"></u-icon>
					<u--text lineHeight="60" color="#FFFFFF" align="center" size="22" bold
						text="消息:收到一条球队邀请,点击查看!"></u--text>
					<u-badge :offset="[-15,0]" absolute type="error" max="99" value="2"></u-badge>
				</view>
			</view>

			<!-- 我的球队 -->
			<view @click="toStadium()" class="inputBox padding10-40 space-between">
				<u--text lineHeight="60" color="#000000" size="30" text="我的球场"></u--text>
				<u-icon slot="right" name="arrow-right"></u-icon>

			</view>

			<!-- 我的球队 -->
			<view class="teamBox padding10-40">
				<u--text lineHeight="60" color="#000000" size="30" text="我的球队"></u--text>
				<u-divider></u-divider>
				<view @click="toTeam()" style="display: flex;">
					<u-icon size="40" color="#000000" name="chat"></u-icon>
					<u--text color="#000000" size="30" text="养生足球队"></u--text>
					<view
						style="border-radius: 30rpx; color: black; padding: 20rpx; text-align: center; background: #4A43EC1A;">
						<text>队长</text>
					</view>
				</view>

				<view class="margin-top-3" style="display: flex;">
					<u--text color="#000000" size="30" text="球队人数"></u--text>
					<view class="padding10-30" style="display: flex;">
						<view v-for="item in 6" style="margin-right: 3%">
							<u--image width="30px" height="30px" radius="8px"
								src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
						</view>
					</view>
				</view>

				<view>
					<view class="margin-top-2 space-between">
						<view class="teamInfoTag">
							<u--text align="center" size="20" color="#B8B6BE" text="报名人数"></u--text>
							<u--text lineHeight="50" align="center" bold size="30" text="14"></u--text>
						</view>

						<view class="teamInfoTag">
							<u--text align="center" size="20" color="#B8B6BE" text="球队评级"></u--text>
							<u--text lineHeight="50" align="center" bold size="30" text="菜鸟"></u--text>
						</view>


					</view>

					<view @click="toAddTeam()" class="addTeam margin-top-5">
						
						<view style="margin-right: 3%;">
							<u-icon size="40" color="#FFFFFF" name="chat"></u-icon>
						</view>
						<view>
							<u--text color="#ffffff" align="center" size="30" text="创建球队"></u--text>
						</view>
					</view>
				</view>

			</view>

			<!-- 足球日历 -->
			<view class="inputBox padding10-30">
				<view class="space-between">
					<u--text size="30" text="足球日历"></u--text>
					<view class="flex">
						<u--text size="20" color="#B8B6BE" text="记录您最近参加的比赛"></u--text>
					</view>
				</view>
				<u-divider></u-divider>


				<view @click="toMyBallGame()" class="ballBox space-between padding20-40">
					<view class="captainBox">
						<view style="margin-right: 10%;">
							<u--image :showLoading="true" radius="10" src="https://cdn.uviewui.com/uview/album/1.jpg"
								width="60px" height="60px"></u--image>
						</view>

						<view style="width: 300rpx;">
							<u--text size="28" text="广州球王"></u--text>
							<u--text size="20" color="#B8B6BE" text="8.25 周日 10:00-17:00"></u--text>
						</view>
					</view>
					<view style="height: 45rpx;" class="tag">暂未成局</view>
				</view>
			</view>

			<!-- 我的资料 -->

			<view class="inputBox padding10-30">
				<view class="space-between padding15-0">
					<u--text size="30" text="我的资料"></u--text>
					<view class="flex">
						<u-icon size="30" color="#B8B6BE" name="chat"></u-icon>
						<u--text size="20" color="#B8B6BE" text="编辑"></u--text>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="space-between padding15-0">
					<u--text size="30" text="我的资料"></u--text>
					<view class="flex">
						<u-icon size="30" color="#B8B6BE" name="chat"></u-icon>
						<u--text size="20" color="#B8B6BE" text="编辑"></u--text>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="space-between padding15-0">
					<u--text size="30" text="年龄"></u--text>
					<view class="flex">
						<u--text size="20" color="#B8B6BE" text="28岁"></u--text>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="space-between padding15-0">
					<u--text size="30" text="球龄"></u--text>
					<view class="flex">
						<u--text size="20" color="#B8B6BE" text="5年"></u--text>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="space-between padding15-0">
					<u--text size="30" text="场上位置"></u--text>
					<view class="flex">
						<u--text size="20" color="#B8B6BE" text="前锋"></u--text>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="space-between padding15-0">
					<u--text size="30" text="水平等级"></u--text>
					<view class="flex">
						<u--text size="20" color="#B8B6BE" text="笑趴菜"></u--text>
					</view>
				</view>
				<u-divider></u-divider>

				<view class="gameInfo padding15-0">
					<view class="padding10-30">
						<u--text size="20"
							text="00:01:44.501项目'footballBookingApp' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看00:01:44.501 项目 'footballBookingApp' 编译成功。"></u--text>
					</view>
				</view>
				<view class="flex">
					<view v-for="item in 3" style="height: 45rpx;" class="tag">暂未成局</view>
				</view>
			</view>

			<!-- 我的收藏 -->
			<view class="inputBox padding10-30 ">
				<view @click="toConcern()" class="space-between padding15-0">
					<u--text size="30" text="我的收藏"></u--text>
					<view class="flex">
						<u-icon size="30" color="#B8B6BE" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>


		</view>


		<tabbar :i="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue' //这里就是在页面中引入组件路径的写法
	export default {
		components: {
			tabbar
		},
		data() {
			return {

			}
		},
		methods: {
			// 跳转到球场列表
			toStadium(){
				uni.navigateTo({
					url:"/pages/stadium/stadiumList"
				})
			},
			// 跳转到消息
			toMessage() {
				uni.navigateTo({
					url: "messageList"
				})
			},
			// 跳转到我的球赛
			toMyBallGame() {
				uni.navigateTo({
					url: "myBallGame"
				})
			},
			// 跳转到我的球队
			toTeam(){
				uni.navigateTo({
					url: "/pages/team/myTeam"
				})
			},
			toAddTeam(){
				uni.navigateTo({
					url:"/pages/team/addTeam"
				})
			},
			// 我的收藏
				
			toConcern(){
				uni.navigateTo({
					url:"concern"
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: auto;
		border-radius: 20px 20px 0px 0px;
		opacity: 1;
		background: #FEFEFF;
		padding-bottom: 150rpx;
	}

	.meInfo {
		margin-top: -11%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.messageBox {
		position: relative;
		width: 70%;
		height: auto;
		border-radius: 16rpx;
		opacity: 1;
		background: #5669FF;
		display: flex;
		align-items: center;
	}

	.inputBox {
		width: 80%;
		height: auto;
		border-radius: 16px;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 8px 25px 0px rgba(83, 89, 144, 0.07);
		margin: 6% auto;
		border: 1px solid #EEEEEE;
	}

	.teamBox {
		padding-bottom: 30rpx;
		border: 1rpx solid #EEEEEE;
		width: 80%;
		height: auto;
		border-radius: 40rpx;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		margin: 4% auto;
		background: linear-gradient(180deg, rgba(74, 67, 236, 0.1) 0%, rgba(255, 255, 255, 0) 98%);
	}

	.teamInfoTag {
		margin-right: 0%;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 48%;
		border-radius: 16rpx;
		height: auto;
		padding: 3% 0;
		background-color: white;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 5px 20px 0px rgba(211, 209, 216, 0.3);
	}

	.addTeam {
		width: 100%;
		height: auto;
		background: #4A43EC;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		min-height: 100rpx;
	}

	.ballBox {
		width: 90%;
		height: auto;
		border: 1rpx solid #EEEEEE;
		margin: 3% auto;
		border-radius: 16rpx;
	}

	.captainBox {
		display: flex;
		align-items: center;
	}

	.gameInfo {
		width: 100%;
		height: auto;
		background-color: #F2F3F5;
		margin: 2% auto;
		border-radius: 16rpx;
	}
</style>